<template>
  <div style="width: 1500px">
    <el-tabs v-model="editableTabsValue" type="card" @tab-click="handleClick" style="width: 900px;float: left">
      <el-tab-pane
          :key="item.name"
          v-for="(item, index) in editableTabs"
          :label="item.title"
          :name="item.name"
      >
        <el-switch
            v-model="value1"
            @change="anniu"
            active-text="未完成"
            inactive-text="全部">
        </el-switch>
        <template>
          <el-table
              ref="multipleTable"
              :data="tableData"
              tooltip-effect="dark"
              style="width: 100%">
            <el-table-column
                label="日期"
                width="200">
              <template slot-scope="scope">{{ scope.row.date }}</template>
            </el-table-column>
            <el-table-column
                prop="level"
                label="等级"
                width="200">
            </el-table-column>
            <el-table-column
                prop="content"
                label="计划内容"
                width="200">
            </el-table-column>
            <el-table-column
                width="200"
                label="是否完成"
                show-overflow-tooltip>
              <template slot-scope="scope">
                <el-switch
                    v-model="scope.row.status"
                    :active-value="1"
                    :inactive-value="2"
                    active-color="#02538C"
                    inactive-color="#B9B9B9"
                    disabled/>
              </template>
            </el-table-column>
          </el-table>
          <!--      <div style="margin-top: 20px">-->
          <!--        <el-button @click="toggleSelection([tableData[1], tableData[2]])">切换第二、第三行的选中状态</el-button>-->
          <!--        <el-button @click="toggleSelection()">取消选择</el-button>-->
          <!--      </div>-->
        </template>
      </el-tab-pane>
    </el-tabs>
<!--    <el-steps :active="active" finish-status="success">-->
<!--      <el-step title="leve1"></el-step>-->
<!--      <el-step title="leve2"></el-step>-->
<!--      <el-step title="leve3"></el-step>-->
<!--    </el-steps>-->
<!--    <el-button style="margin-top: 12px;" @click="behind">上一步</el-button>-->
<!--    <el-button style="margin-top: 12px;" @click="next">下一步</el-button>-->
<!--    进度条-->
    <div style="box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);width: 500px;height: 500px;float: left;margin-left: 5px;position: fixed;top: 100px;right: 110px">
      <span style=";margin-left: 200px;margin-top: 20px"><i class="el-icon-pie-chart"></i>计划进度</span><br>
      <span>总计划数:</span>
      <el-input-number v-model="input1" :disabled="true" :controls="false"></el-input-number>
      <el-progress :percentage="l1" ></el-progress>
      <span>完成计划数:</span>
      <el-input-number v-model="input2" :disabled="true" :controls="false"></el-input-number>
      <el-progress :percentage="l2" status="success" ></el-progress>
      <span>未完成计划数:</span>
      <el-input-number v-model="input3" :disabled="true" :controls="false"></el-input-number>
      <el-progress :percentage="l3" status="exception" ></el-progress>
      <div style="float: left;margin-top: 20px">
        <span style="float: left;margin-top: 50px;margin-left: 50px">完成进度:</span>
        <el-progress type="circle" :percentage="66" style="float: left;margin-left: 50px" ></el-progress>
      </div>

    </div>
  </div>

</template>

<script>
import axios from "axios";
export default {
  name: "jindu",
  data() {
    return {
      l1:1,
      l2:1,
      l3:1,
      input1:0,
      input2:0,
      input3:0,
      token:'',
      allData:[],
      //计划对象
      tiem1:{

      },
      value1:1,
      config:{
        data: [
          {
            name: '总计划量',
            value: 1
          },
          {
            name: '完成',
            value: 1
          },
          {
            name: '未完成',
            value: 1
          },
        ],
        showValue:true
      },
      tableData: [],
      multipleSelection: [],
      //步骤进度
      active: 0,
      editableTabsValue: '1',
      editableTabs: [{
        title: 'Tab 1',
        name: '1',
      }, {
        title: 'Tab 2',
        name: '2',
      }],
      tabIndex: 2
    }
  },
  mounted() {
    this.token=localStorage.getItem("token");
    this.find();
  },
  methods: {

    find(){
      axios({
        method:'get',
        params:{
          token:this.token
        },
        url:'http://localhost:8081/front/message'
      }).then(res=>{
        var allData=res.data.data
        this.allData=allData
        for(var i in allData){
          this.input1++
          if(allData[i].msg_type == 'Complete'){
            this.input2++
          }
          this.tableData.push({
            date: allData[i].created_time.substring(0,10),
            content: allData[i].msg_content,
            level:allData[i].msg_state,
            status: allData[i].msg_type == 'Complete' ? 1:0,
          })
        }
        this.input3=this.input1-this.input2
        console.log(this.input3)
      })
      this.jindutiao()
    },
    //进度条
    jindutiao(){
      this.l1=100
      this.l2=66
      this.l3=33
      this.changeStatus()
    },
    //是否完成
    anniu(){
      console.log(this.allData)
      var t=''
      if(this.value1){
        t='Unfinished'
        this.tableData=[]
        var allData=this.allData
        for(var i in allData){
          if(allData[i].msg_type == t){
            this.tableData.push({
              date: allData[i].created_time.substring(0,10),
              content: allData[i].msg_content,
              status:allData[i].msg_type == 'Complete' ? 1:0,
            })
          }
        }
      }else{
        this.tableData=[]
        this.find()
      }

    },
    handleClick(tab, event){
      console.log(this.config)
      // axios({
      //   method:'',
      //   url:'',
      //   par: '',
      // }).then(res=>{
      //   this.tableData=res
      //
      // })
    },
  }
}
</script>

<style scoped>

</style>
